<template>
    <el-form ref="form" label-position="right" class="j-attribute-set" size="mini" label-width="80px">
        <el-form-item label="数据集">
            <el-select v-model="actionName" placeholder="请选择事件" @change="targetChange">
                <el-option :label="i.title" :value="i.name" :key="k" v-for="(i,k) in action.target"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
</template>
<script type="text/javascript">
import { createNamespacedHelpers } from 'vuex';
const { mapGetters } = createNamespacedHelpers('cloud')
export default {
    props: {
        value: [Array, Object, Number, String]
    },
    data() {
        return {
            actionName: ''
        }
    },
    computed: {
        ...mapGetters(['action'])
    },
    beforeMount() {
        if (this.value.action[0].name != '') {
            this.actionName = this.value.action[0].name
        }
    },
    methods: {
        targetChange(val) {
            for (var i = 0; i < this.action.target.length; i++) {
                if (this.action.target[i].name == val) {
                    this.value.action[0] = {
                        type:'click',
                        name:this.action.target[i].name
                    }
                }
            }
        }
    }

}
</script>
<style type="text/css" lang="scss">
.j-attribute-set {
    padding: 10px;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}

.el-form--label-top .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0;
}
</style>